{% extends "cover_layout.html" %}
{% block content %}

    <div class="d-flex w-100 h-100 mx-auto flex-column">
        <header class="masthead mb-auto">
            <div class="navbar navbar-dark bg-dark shadow-sm">
                <div class="container d-flex justify-content-between">
                    <strong>亚马逊书籍分析</strong>
                    <nav class="nav nav-masthead justify-content-center">
                       <a class="nav-link" href='{{ url_for('Author') }}'>以作者为单位的价格比较</a>
                        <a class="nav-link" href='{{ url_for('genre') }}'>近年按照虚构与非虚构来划分的书籍评论价格</a>
                    </nav>
                </div>
            </div>
        </header>
        <body>
        <h2 style="text-align: center">以虚构与非虚构分类</h2>
        {{tu|safe}}
        <div class="my-3 p-3 bg-white rounded shadow-sm" style="width:550px; left: 600px; position: absolute; top: 150px;">
            <h4 class="border-bottom pt-2 pb-3 mb-0 ml-2" style="text-align: center">文字介绍</h4>
            <div class="d-flex text-muted pt-3 ml-2"></div>
            <p class="ml-3 pb-3 mb-0 lh-sm border-bottom" style="width: 90%;">由图中可得出，非虚构的书比虚构的书卖得多。<br><br>
            </p>
        </div>
        <br>
        </body>
        <footer class="mastfoot mt-auto" style="padding-top: 1px; padding-bottom: 1.5rem; text-align: center">
            <div class="inner">
                <p></p>
            </div>
        </footer>
    </div>

{% endblock content %}